<template>
	<div class="min-h-screen bg-gray-50">


		<!-- 上方空白区域 -->
		<div class="h-32 bg-white"></div>

		<!-- 管理员控制台介绍区域 -->
		<div class="py-20 bg-white">
			<div class="container mx-auto px-12">
				<div class="max-w-none mx-auto">
					<h2 class="text-5xl font-bold mb-6 text-gray-900">管理员控制台</h2>
					<p class="text-xl text-gray-600 mb-8 leading-relaxed max-w-2xl">
						管理平台内容与用户数据，监控系统运行状态，确保教学活动顺利开展
					</p>
					<p class="text-xl text-gray-600 mb-8 leading-relaxed max-w-2xl">
						欢迎管理员登录
					</p>
					<div class="flex gap-4">
						<el-button type="primary" size="large" class="rounded-lg px-8 py-3 text-base font-medium"
							@click="manageCourses">
							管理员控制台
						</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 管理员首页图片展示区域 -->
		<div class="py-12 bg-gray-50">
			<div class="container mx-auto px-12">
				<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
					<div class="rounded-xl overflow-hidden shadow-lg">
						<img src="@/assets/管理员首页图片1.png" alt="管理员首页图片1" class="w-full h-auto object-cover" />
					</div>
					<div class="rounded-xl overflow-hidden shadow-lg">
						<img src="@/assets/管理员首页图片2.png" alt="管理员首页图片2" class="w-full h-auto object-cover" />
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	const router = useRouter()

	const manageCourses = () => {
		router.push('/console')
	}
</script>

<style scoped>
	.el-input {
		--el-input-bg-color: #f3f4f6;
		--el-input-border-color: transparent;
		--el-input-hover-border-color: #e5e7eb;
		--el-input-focus-border-color: #3b82f6;
	}

	.el-button--primary {
		--el-button-bg-color: #3b82f6;
		--el-button-border-color: #3b82f6;
		--el-button-hover-bg-color: #2563eb;
		--el-button-hover-border-color: #2563eb;
	}

	.rounded-lg {
		border-radius: 0.5rem;
	}

	.transition-colors {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}

	.transition-shadow {
		transition-property: box-shadow;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}

	.hover\:shadow-lg:hover {
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	}

	.hover\:text-blue-400:hover {
		color: #60a5fa;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>